import { useEffect, useState } from "react";
import "./switch.scss";
import classNames from "classnames";

type SwitchProps = Omit<React.HTMLAttributes<HTMLDivElement>, "chilren"> & {
  checked?: boolean;
  onChange?: (bol: boolean) => void;
};
export const Switch = ({
  checked,
  onChange,
}: SwitchProps): React.ReactElement => {
  const [isChecked, setIsChecked] = useState(false);

  useEffect(() => {
    if (checked) {
      setIsChecked(checked);
    }
  }, [checked]);
  const switchClassName = () => {
    return classNames("dashboard_switch", isChecked && "switch_active");
  };

  const handleChange = () => {
    setIsChecked(!isChecked);
    onChange?.(!isChecked);
  };
  return (
    <>
      <div className={switchClassName()} onClick={handleChange}></div>
    </>
  );
};
